<%--
    @Description： 检查不良
    @Author： 樊双峰
    @Date： 2019-1-22
--%>
<style type="text/css">
tr, th, td {
    text-align: center;
}
</style>

<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${SYS_QUERY_PATH}" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <g:hiddenField name="SYS_QUERY_NAME" value="${SYS_QUERY_NAME}"/>
            <label>开始日期<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd"
                   size="11" id="start-date-input" readonly value="${startTime}"/>&nbsp;
            <label>结束日期<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="endTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd"
                   size="11" id="end-date-input" readonly value="${endTime}"/>&nbsp;
            <label>客户<strong><span class="text-danger"></span></strong>：</label>
            <g:textField name="customName" value="${customName}" size="17" placeholder="客户"/>&nbsp;
            <label>装置<strong><span class="text-danger"></span></strong>：</label>
            <g:textField name="deviceName" value="${deviceName}" size="17" placeholder="装置"/>&nbsp;
            <label>部件<strong><span class="text-danger"></span></strong>：</label>
            <g:textField name="partName" value="${partName}" size="17" placeholder="部件"/>
            <br/><br/>
            <label>刻印号<strong><span class="text-danger"></span></strong>：</label>
            <g:textField name="markNum" value="${markNum}" size="17" placeholder="刻印号"/>&nbsp;
            <label>客户LOT<strong><span class="text-danger"></span></strong>：</label>
            <g:textField name="customerLot" value="${customerLot}" size="17" placeholder="客户LOT"/>&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/CheckUnYield/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>
        </div>
    </form>
</div>

<div class="bjui-pageContent tableContent">
    <g:if test="${report_011.size() > 0}">
        <div style="width:96%;height:400px;margin: 15px auto;" id="unYieldByDescChart"></div>

        <div style="width:96%;height:400px;margin: 15px auto;" id="unYieldByDayChart"></div>

        <div style="margin:15px auto; width:96%;">
            <div class="row" style="padding: 0px 0px;">
                <div class="col-md-12" id="">
                    <table id="data" data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                        <thead>
                        <tr>
                            <th width="50">NO.</th>
                            <g:each in="${tableHeadList}" status="i" var="headInstance">
                                <g:if test="${headInstance != 'RN'}">
                                    <th><g:message code="${headInstance}" default="${headInstance}"/></th>
                                </g:if>
                            </g:each>
                            <th>不良累积</th>
                        </tr>
                        </thead>
                        <tbody>
                        <g:each in="${report_011}" status="i" var="dataInstance">
                            <tr>
                                <td>${i + 1}</td>
                                <g:each in="${tableHeadList}" status="j" var="headInstance">
                                    <g:if test="${headInstance != 'RN'}">
                                        <td>${dataInstance["${headInstance}"]}</td>
                                    </g:if>
                                </g:each>
                                <td>${unYieldList[i]}</td>
                            </tr>
                        </g:each>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </g:if>
    <g:else>
        <g:render template="../template/emptyPanel"/>
    </g:else>
</div>
<script type="text/javascript"
        src="${request.getContextPath()}/js/echarts/v3/echarts.min.js?version=${new Date().getTime()}"></script>
<script type="text/javascript"
        src="${request.getContextPath()}/js/echarts/echarts.js?version=${new Date().getTime()}"></script>
<script type="text/javascript">
    var unYieldByDescChart = function () {
        var dom = document.getElementById("unYieldByDescChart");
        var myChart = echarts.init(dom);
        var unYieldDesc = [];
        var unYieldQty = [];
        var unYieldTotal = [];
        <g:each in="${report_012}" status="i" var="dataInstance">
        unYieldDesc.push('${dataInstance.UN_YIELD_DESC}');
        unYieldQty.push('${dataInstance.UN_YIELD_QTY}');
        </g:each>
        <g:each in="${unYieldTotal}" status="i" var="dataInstance">
        unYieldTotal.push('${dataInstance}');
        </g:each>
        var colors = ['#C12E34', '#000'];
        var option = {
            color: colors,
            title: {
                text: '不良项柏拉图'
            },
            legend: {
                data: ['不良数', '累计比例']
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {show: true}
                }
            },
            xAxis: {
                type: 'category',
                show: true,
                name: '不良项',
                data: unYieldDesc,
                axisLabel: {
                    show: true,
                    rotate: 20,
                    textStyle: {
                        color: '#3A82B9'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#3A82B9',
                        width: 2
                    }
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            yAxis: [
                {
                    type: 'value',
                    show: true,
                    name: '不良数',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    splitArea: {
                        show: false
                    }
                },
                {
                    type: 'value',
                    show: true,
                    name: '累计比例',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        formatter: '{value} %',
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    splitArea: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '不良数',
                    type: 'bar',
                    stack: '数量',
                    data: unYieldQty,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    }
                },
                {
                    name: '累计比例',
                    type: 'line',
                    data: unYieldTotal,
                    stack: '累计比例',
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{c}%',
                                textStyle: {
                                    color: '#000'
                                }
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option, true);
    }

    var unYieldByDayChart = function () {
        var dom = document.getElementById("unYieldByDayChart");
        var myChart = echarts.init(dom);
        var unYieldDescList = [];
        var datesList = [];
        <g:each in="${unYieldDescList}" status="i" var="headInstance">
        unYieldDescList.push('${headInstance.UN_YIELD_DESC}');
        </g:each>
        <g:each in="${dateList}" status="i" var="headInstance">
        datesList.push('${headInstance.TRANS_TIME}');
        </g:each>
        var option = {
            title: {
                text: '每日返工统计'
            },
            legend: {
                data: unYieldDescList
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {show: true}
                }
            },
            xAxis: {
                type: 'category',
                show: true,
                name: '日期',
                data: datesList,
                axisLabel: {
                    show: true,
                    rotate: 30,
                    textStyle: {
                        color: '#3A82B9'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#3A82B9',
                        width: 2
                    }
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            yAxis: [
                {
                    type: 'value',
                    show: true,
                    name: '不良数',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    splitArea: {
                        show: false
                    }
                }
            ],
            series: [
                <g:each in="${unYieldByDayChart}" status="i" var="dataInstance">
                {
                    name: '${dataInstance.UN_YIELD_DESC}',
                    type: 'line',
                    showSymbol: true,
                    symbol: 'circle',	// 设定为实心点
                    symbolSize: 10,	// 设定实心点的大小
                    stack: '数量',
                    data: [
                        <g:each in="${dateList}" status="j" var="headInstance">
                        ${dataInstance[headInstance.TRANS_TIME]},
                        </g:each>
                    ],
                },
                </g:each>
            ]
        };
        myChart.setOption(option, true);
    }

    $(function () {
        <g:if test="${report_011.size() > 0}">
        unYieldByDescChart();
        unYieldByDayChart();
        </g:if>
    });
</script>